<template>
	<view class="page-index">
		<view class="bar-area">
			<view
				class="fc-white fs30"
				@click="loginOut"
				:style="showQuitBtn ? '' : 'visibility: hidden;'"
				>退出</view
			>
			<view class="flex-row" @click="areaChange">
				<view class="fc-white fs35">取血</view>
			</view>
			<view class="fc-white fs30">{{ loginUser && loginUser.YHXM }}</view>
		</view>

		<view class="scan-tips-warning" v-if="step == 0">
			请扫描血袋码
		</view>
		<!-- <view class="scan-tips-primary" v-if="step == 1">
			已确认病人腕带信息
		</view>
		<view class="scan-tips-warning" v-if="step == 2">
			请再确认患者腕带信息
		</view> -->

		<!-- <view
			style="display: flex; position: absolute; top: 0rpx; left: 100rpx"
		>
			<view>
				<view @click="scanTest(testId, 2)">血袋扫描测试</view>
			</view>
			<view>
				<input
					type="text"
					v-model="testId"
					placeholder="请输入血袋码"
				/>
			</view>
			<view>
				<view @click="showCollectionCheck = true">血袋取血</view>
			</view>
		</view> -->

		<!--   -->
		<view class="main-context" v-if="step != 0">
			<scroll-view
				class="scroll-view"
				scroll-y="auto"
				:refresher-enabled="false"
				@refresherrefresh="onPullRefresh"
				@scrolltolower="onReachBottomDistance"
				:refresher-triggered="isRefresherTriggered"
			>
				<view>
                    <view class="item-area" v-for="(item,index) in listData" :key="index">
                        <view class="item-title">
                            <!-- <view class="item-brch">{{item.brch}}</view> -->
							<view class="item-brch">{{item.mzhm}}</view>
                            <view class="item-line"></view>
                            <view class="item-body">
                                <view class="item-body-top">
                                    <view class="fs30 fb">{{item.brxm}}</view>
                                </view>
                            </view>
                            <view class="item-check-status">
                                <view class="item-check-yes">
                                    <view class="item-check-status-text">{{getBloodBagStatus(item.xdzt)}}</view>
                                </view>
                            </view>
                        </view>
                        <view class="item-content">
                            <view class="item-content-list">
                                <view class="list-item">
                                    <view class="blood-bag-tag">血袋号：{{item.barCode}}</view>
                                    <view class="item-name">{{item.bloodName}}</view>
                                    <view class="item-amount">{{item.volume}}ml</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <u-empty :show="!(listData && listData.length > 0)" marginTop="300" ></u-empty>
                </view>
			</scroll-view>
			<view class="submit-button">
				<button class="primary-button" style="width:100%;margin:0rpx 20rpx;" @click="handleConfirm">确认</button>
			</view>
		</view>
		<u-popup
			:show="showCollectionCheck"
			:round="20"
			closeable
			@close="handleDoubleCheckClose()"
		>
			<view class="blood-bag-check">
				<view class="blood-bag-check-title">取血</view>
				<view class="blood-bag-check-main">
					<view class="blood-bag-check-checked">
						<view class="blood-bag-tag" v-for="(item,index) in alreadyList" :key="index">血袋号：{{item}}</view>
						<view v-show="alreadyList.length > 0">已取血</view>
					</view>
					<view class="blood-bag-check-checking">
						<view class="blood-bag-check-checking-main">
							<view style="margin-right:10rpx;">是否确认取血</view>
							<view class="blood-bag-tag" v-for="(item,index) in scanList" :key="index">血袋号：{{item}}</view>
							<view>血袋</view>
						</view>
					</view>
				</view>
				<view class="submit-button">
					<button style="width: 30%" @click="handleDoubleCheckClose()">取消</button>
					<button
						class="primary-button"
						style="width: calc(70% - 50rpx)"
						@click="handleSubmit()"
					>
						确认
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from "vuex"
import { logout } from "@/api/utils.js"
import {
	getDateTimeString,
	getInspectType,
	getTimestamp,
	getBloodBagStatus,
	showToast,
} from "@/static/js/common.js"
// import plus from "uni-app-plus"

export default {
	components: {},
	props: {
		showQuitBtn: {
			type: Boolean,
			default: function () {
				return true
			},
		},
	},
	data() {
		return {
			step: 0, // 0:初始化空白状态  1:已扫描腕带  2:已扫描输液贴

			isRefresherTriggered: false,

			listData: [], // 医嘱计划处理后的数据
			nowPatient: {
				brch: "Q123", //
				brxm: "张三丰", //
				brxbDm: "1", //
				brnl: "12岁", //
				mzhm: "BLH112312313", //
				brzs: "感到不舒服", //
			}, // 当前病人

			alreadyList:[],//已签收的血袋号
			scanList:[],//当前扫描的血袋号

			testBrid: "", //
			testId: "", //

			showCollectionCheck: false, //取血确认

		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area", "skinTestPatientList"]),
		actions() {
			if (this.area && this.area.length > 0) {
				let list = this.area.map((item) => {
					return {
						name: item.ksmc,
						code: item.ksdm,
					}
				})
				return list
			} else {
				return []
			}
		},
	},
	beforeDestroy() {
		uni.$off("scanCodeEmit") //取消监听
		clearInterval(this.skinTestInterval) //销毁皮试定时器
	},
	mounted() {
		// 接收原生扫描传值     监听扫描事件
		uni.$on("scanCodeEmit", async (res) => {
			console.log("检验执行扫描内容：", res)

			let result = await this.getBloodBagDetail(res);
			console.log('血袋详情：',result);
			if(result.res.ReType == 0){
				if(result.res.Data.length > 0){
					this.step = 1 //已扫描血袋
					let scanBloodBag = result.res.Data[0];
					if(this.listData.find(el=>el.barCode == scanBloodBag.barCode) == null){
						if(Number(scanBloodBag.xdzt) >= 2){
							showToast(-1,`血袋${scanBloodBag.barCode}已取血`) //消息提示
							return;
						}else if(this.listData.find(el=>el.xdzt < 2) != null){// 页面上存在未取血的血袋，不允许获取新的血袋
							let bolldBagNotCollection = this.listData.find(el=>el.xdzt < 2);
							showToast(-1,`血袋号【${bolldBagNotCollection.barCode}】还未取血！请先取血`) //消息提示
							return;
						}else{
							this.listData.push(scanBloodBag);
						}
					}else{
						showToast(-1,`血袋${scanBloodBag.barCode}已扫描！`) //消息提示
						return;
					}
				}else{
					showToast(-1,'未找到血袋信息！') //消息提示
					return;
				}
			}else{
				showToast(-1,'未找到血袋信息！') //消息提示
				return;
			}
		})

		console.log("当前登陆人信息：", this.loginUser)
	},
	methods: {
		/**
		 * 扫描测试
		 * type 1 腕带   2 血袋
		 */
		async scanTest(res, type) {
			let result = await this.getBloodBagDetail(res);
			console.log('血袋详情：',result);
			if(result.res.ReType == 0){
				if(result.res.Data.length > 0){
					this.step = 1 //已扫描血袋
					let scanBloodBag = result.res.Data[0];
					if(this.listData.find(el=>el.barCode == scanBloodBag.barCode) == null){
						if(Number(scanBloodBag.xdzt) >= 2){
							showToast(-1,`血袋${scanBloodBag.barCode}已取血`) //消息提示
							return;
						}else if(this.listData.find(el=>el.xdzt < 2) != null){// 页面上存在未取血的血袋，不允许获取新的血袋
							let bolldBagNotCollection = this.listData.find(el=>el.xdzt < 2);
							showToast(-1,`血袋号【${bolldBagNotCollection.barCode}】还未取血！请先取血`) //消息提示
							return;
						}else{
							this.listData.push(scanBloodBag);
						}
					}else{
						showToast(-1,`血袋${scanBloodBag.barCode}已扫描！`) //消息提示
						return;
					}
				}else{
					showToast(-1,'未找到血袋信息！') //消息提示
					return;
				}
			}else{
				showToast(-1,'未找到血袋信息！') //消息提示
				return;
			}
		},

		/**
		 * 获取血袋详情
		 * bloodBagBarCode 血袋号
		 */
		getBloodBagDetail(bloodBagBarCode){
			let date = new Date();
			let params = {
				barCode: bloodBagBarCode,
				// visitId: "string",
			}
			return this.$commonAjax(
				"/auth/mobile/advice/BloodTranSfusion/ScanBloodBag",
				params
			)
		},

		//获取血袋状态
		getBloodBagStatus(status){
			return getBloodBagStatus(status);
		},
		
		//批量取血血袋
		handleSubmit(){
			let params={
				barBagList: this.scanList,
				registrationTime: getDateTimeString(new Date()),
				userId: this.loginUser.YHID,
				userName: this.loginUser.YHXM,
				xdzt: "2",//设置为已取血
			}
			return this.$commonAjax(
				"auth/mobile/advice/BloodTranSfusion/SignOrFetchBloodBag",
				params
			).then(res=>{
				if(res.res.ReType == 0){
					showToast(res.res.ReType,res.res.Msg);
					this.scanList.forEach(el=>{
						this.listData.find(bag=>bag.barCode == el).xdzt = '2';//血袋状态设置为 2 已取血
					})
					this.showCollectionCheck = false;
				}
			})
		},

		handleConfirm(){
			if(this.listData.length == 0){
				showToast(-1,'请先扫描血袋！');
				return;
			}
			this.alreadyList = [];// 已取血的血袋号
			this.scanList = [];// 即将取血的血袋号
			this.listData.forEach(el=>{
				if(Number(el.xdzt) == 2){
					this.alreadyList.push(el.barCode);
				}else{
					this.scanList.push(el.barCode);
				}
			})
			// this.showCollectionCheck = true;//取血不弹确认框
			this.handleSubmit();
		},

		//二次核对弹窗点击关闭
		handleDoubleCheckClose() {
			this.showCollectionCheck = false
		},

		/**
		 * 点击批示提示框确认按钮
		 */
		confirmSkinTestTips() {
			this.skinCompleteTipsShow = false //关闭弹窗
			clearInterval(this.skinTestInterval) //暂时关闭定时器
		},

		/**
		 * 根据病人id 获取病人详情
		 * brid 病人id
		 */
		getPatientByBrid(brid) {
			let params = {
				orgId: this.loginUser?.JGID, //长机构id
				jzlx: null, // 就诊类型 1 抢救 2 留观 3诊室 不传就是全部
				lspb: 0, //离室判别
				yhdm: this.loginUser?.YHDM, // 当前登录用户的员工代码
				type: 1, //：病人列表   2：我的关注
				// hisJzxh: idVismed,
				// idMedord:idMedord,// 医嘱组号
				brid: brid, //病人id
			}
			return this.$commonAjax(
				"auth/mobile/patient/get/getPatientList",
				params
			)
		},

		loginOut() {
			logout()
		},
		onPullRefresh() {
			if (this.isRefresherTriggered) {
				return
			}
			this.isRefresherTriggered = true
		},
		onReachBottomDistance() {
			console.log(1111)
		},
	},
}
</script>

<style lang="scss">
.main-context {
	position: relative;
	height: calc(100% - 120rpx);
}
.scan-tips-warning {
	text-align: center;
	background-color: #faefe4;
	font-size: 30rpx;
	color: #ff9a27;
	padding: 10rpx 0rpx;
}
.scan-tips-primary {
	text-align: center;
	background-color: #4089fe1f;
	font-size: 30rpx;
	color: #4088fe;
	padding: 10rpx 0rpx;
}
.bar-area {
	height: 100rpx;
	background-color: $bs-color-primary;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 30rpx;
	justify-content: space-between;
	padding: 0 30rpx;
}
.scroll-view {
	width: 100%;
	height: calc(100% - 140rpx);
	background-color: #f3f5f7;
	padding-bottom: 20rpx;
}
.patient-info {
	padding: 20rpx;
    margin: 20rpx;
	position: relative;
    background-color: #FFFFFF;

	.filter-button {
		font-size: 28rpx;
		color: #4088fe;
		background-color: #ebf3fe;
		border: 2rpx solid #4088fe;
		border-radius: 6rpx;
		width: 100rpx;
		text-align: center;
		padding: 10rpx 10rpx;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		z-index: 100;
	}
}
.item-area {
	position: relative;
	margin: 20rpx 20rpx 0 20rpx;
	background-color: #ffff;
	border-radius: 10rpx;
	padding: 10rpx;
	.item-area-main {
		display: flex;
	}
	.item-area-plantime {
		padding: 10rpx;
		margin-top: 10rpx;
		font-size: 25rpx;
		color: #909399;
		border-top: 1px solid #e9e9eb;
	}
	.isExecute {
		position: absolute;
		right: -30rpx;
		top: 0rpx;
		width: 0rpx;
		height: 0rpx;
		border-right: 50rpx solid transparent;
		border-left: 50rpx solid transparent;
		border-bottom: 50rpx solid #26bf40;
		transform: rotate(45deg);
		.my-icon {
			position: relative;
			right: 10rpx;
			top: 24rpx;
			font-weight: bold;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			color: #ffffff;
		}
	}
}
.item-title {
	padding: 6rpx 10rpx 12rpx 10rpx;
	display: flex;
}
.item-line {
	width: 1rpx;
	background-color: #d6d7d9;
	height: 46rpx;
	width: 2rpx;
}

.item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
}
.item-body-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10rpx;
}
.item-check-status {
	font-size: 27rpx;
	margin-left: auto;
	display: flex;
	align-items: center;
	color: #ffffff;
	.item-check-no {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/warning_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/success_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-status-text {
		// position: relative;
		// bottom: 4rpx;
		// right: 4rpx;
	}
}

.item-brch {
	// width: 98rpx;
	font-size: 30rpx;
	color: #e06263;
	font-weight: bold;
	padding: 0 10rpx 0 0;
}
.item-info {
	display: flex;
}

.item-content {
	font-size: 28rpx;
	display: flex;
	position: relative;
	.item-content-icon {
		font-size: 25rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #fff5ea;
		color: #ff9a27;
		// width: 28rpx;
		height: 37rpx;
		margin-right: 10rpx;
	}
	.item-content-list {
		padding: 20rpx 8rpx 0rpx 8rpx;
        border-top: 1px solid #EBEEF5;
        width: 100%;
		.list-item {
			display: flex;
			margin-bottom: 6rpx;
            align-items: center;
			.item-name {
				color: #262626;
			}
			.item-amount {
                margin-left: auto;
				color: #262626;
			}
		}
	}
	.item-usage {
		background-color: #f0f3f6;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		height: 35rpx;
		font-size: 25rpx;
		position: absolute;
		bottom: 15rpx;
		right: 10rpx;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-color: #26bf4017;
		margin-bottom: 10rpx;
		margin-left: auto;
	}
}
.check-datetime {
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
}
.item-bottom {
	display: flex;
	align-items: center;
	.plan-datetime {
		font-size: 25rpx;
		color: #909399;
		padding: 0rpx 12rpx 8rpx 12rpx;
	}
}

.patientInfo-zd {
	width: calc(100% - 100rpx);
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
	position: relative;
	left: 116rpx;
}
.blood-bag-check {
	height: 500rpx;
	position: relative;
	padding: 20rpx;
	.blood-bag-check-title {
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.blood-bag-check-main {
		font-size: 34rpx;
		.blood-bag-check-checked {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.blood-bag-check-checking {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			.blood-bag-check-checking-main {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
		}
	}
}
.blood-bag-tag {
    font-size: 26rpx;
    color: #999999;
    background-color: #f0f3f6;
    border-radius: 8rpx;
    margin: 5rpx 10rpx 5rpx 0rpx;
    padding: 6rpx;
}
.confirm {
    display: flex;
    position: absolute;
    width: 100%;
    bottom: 0rpx;
    padding: 0px 20rpx;
    button {
        color: #262626;
        background-color: #ffffff;
        margin: 5rpx;
    }
    .primary-button {
        color: #ffffff;
        background-color: #4088fe;
    }
}
.submit-button {
	display: flex;
	position: absolute;
	bottom: 20rpx;
	width: 100%;
	button {
		color: #262626;
		background-color: #ffffff;
		margin: 5rpx;
	}
	.primary-button {
		color: #ffffff;
		background-color: #4088fe;
	}
}
</style>
